<template>
    <div class="about_wp">
        <div class="tab_title">
            <span>关于</span>
            <i class="iconfonMy icon-guanbi" @click="ipcRenderer.send('close-about')"></i>
        </div>
        <div class="software_information">
            <img src="@/assets/logo.png" alt="">
            <div class="info">
                <div>wh6期货行情交易软件</div>
                <div>版权所有(C) 博富财经 1997-2024</div>
                <div>版本号 {{ config.version }}</div>
                <div>网信备案号：沪金信备</div>
            </div>
        </div>
        <div class="account_information">
            <div class="title">账号信息</div>
            <div class="info">
                <div>行情服务器：博富云节点</div>
                <div>大账号：webwh6</div>
                <div>小账号：webwh6</div>
            </div>
        </div>
        <div class="account_information support_information">
            <div class="title">支持信息</div>
            <div class="info">
                <div>金融工程师支持：***-***-***</div>
                <div>官方网站：**********</div>
            </div>
        </div>
        <div class="btns">
            <span
                @click="shell.openExternal('https://disclaimer.wenhua.com.cn/disclaimer/terms-1.0-pc.html')">查看软件免责声明及隐私政策</span>
            <span class="confirm_button" @click="ipcRenderer.send('close-about')">确认</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const { shell, ipcRenderer } = require('electron');
const config = ref(require('../../../package.json'))

</script>

<style scoped lang="less">
.about_wp {
    background-color: #ffffff;
    color: #000;
    width: 382px;
    height: 375px;

    .tab_title {
        background-color: #f3f3f3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 25px;
        padding-left: 5px;
        -webkit-app-region: drag;

        i {
            -webkit-app-region: no-drag;
            width: 29px;
            height: 25px;
            text-align: center;
        }

        i:hover {
            background-color: #e61123;
            color: #fff;
        }
    }

    .software_information {
        display: flex;
        align-items: center;
        padding: 0 10px;

        img {
            width: 50px;
            height: 50px;
        }

        .info {
            margin-left: 15px;
            margin-top: 10px;
            line-height: 18px;
        }
    }

    .account_information {
        margin: 20px 10px;
        border: 2px solid #ebebeb;
        position: relative;
        padding: 10px;
        height: 110px;
        line-height: 18px;

        .title {
            position: absolute;
            background-color: #fff;
            top: -10px;
            left: 5px;
            z-index: 50;
        }
    }

    .support_information {
        height: auto;
    }

    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;

        span {
            color: #0909c2;
        }

        .confirm_button {
            border-radius: 4px;
            color: #000;
            border: 1px solid #d3d3d3;
            width: 70px;
            line-height: 23px;
            text-align: center;
        }

        .confirm_button:hover {
            background-color: #e0eef9;
            border-color: #1181d7;
        }
    }
}
</style>
